<template>
    <div class="home-container">
        <van-nav-bar title="黑马头条" fixed/>
        <!--导入 使用ArticleInfo组件-->
        <van-pull-refresh v-model="isLoading" :disabled="finished" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <ArticleInfo
                        v-for="item in artList "
                        :key="item.id"
                        :author="item.aut_name"
                        :speech="item.comm_count"
                        :publish-date="item.pubdate"
                        :cover="item.cover"
                        :title="item.title">
                </ArticleInfo>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    import {getArticlesListAPI} from "../../api/articleAPI";
    import ArticleInfo from "../../components/ArticleInfo/ArticleInfo";

    export default {
        name: "Home",
        data() {
            return {
                page: 1, // 页码值
                limit: 10,// 每页显示第三条数据
                artList: [], // 数据列表
                loading: true, // 是否加载下一页  loading为true不能触发onload事件
                finished: false, // 数据是否全部加载完毕  没有更多数据需要改成true
                isLoading: false // 是否正在下拉刷新
            }
        },
        created() {
            this.getArticleList()
        },
        methods: {
            //获取文章列表数据
            async getArticleList(isRefresh) {
                const {data: res} = await getArticlesListAPI(this.page, this.limit)
                if (isRefresh){
                    // 证明是下拉刷新 新数据在前旧数据在后
                    //  发起请求获取数据 需要将之前的数据和新的数据进行拼接
                    this.artList = [...res, ...this.artList]
                    //请求完数据后将loading设置false表示加载完毕
                    this.isLoading = false
                }else {
                    // 证明是上拉加载 新数据在后旧数据在前
                    //  发起请求获取数据 需要将之前的数据和新的数据进行拼接
                    this.artList = [...this.artList, ...res]
                    //请求完数据后将loading设置false表示加载完毕
                    this.loading = false
                }

                // 请求的数组长度为0表示数据全部加载完毕
                if (res.length === 0) {
                    this.finished = true
                }
            },
            // 上拉加载
            onLoad() {
                // 让页面值+1
                this.page++
                //调用方法发起请求
                this.getArticleList()
            },
            //下拉刷新
            onRefresh() {
                this.page++
            // 发起请求湖区数据
                this.getArticleList(true)

            }
        },
        components: {ArticleInfo}
    }
</script>

<style lang="less" scoped>
    .home-container {
        padding: 46px 0 50px 0;

     .van-nav-bar {
            background-color: #007bff;
        }

        /deep/ .van-nav-bar__title {
            color: #ffffff;
        }
    }
</style>
